'use client';
import Link from 'next/link';
import { FC, Fragment, SVGProps } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';
import { ChevronDownIcon } from '@heroicons/react/24/outline';

import {
  Menu,
  MenuButton,
  MenuItem,
  MenuItems,
  Transition,
} from '@headlessui/react';

export interface FiltersProps {
  filters: {
    label: string;
    icon: FC<SVGProps<SVGSVGElement>>;
    value: string;
    heading: string;
  }[];
  selectedFilter: string;
}

export function Filters({ selectedFilter, filters }: FiltersProps) {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const updateFilter = (filterBy: string) => {
    const params = new URLSearchParams(searchParams.toString());
    if (filterBy) {
      params.set('filterBy', filterBy);
    } else {
      params.delete('filterBy');
    }
    return `${pathname}${filterBy === 'All' ? '' : '?' + params.toString()}`;
  };

  return (
    <>
      {/* DESKTOP */}
      <ul
        className="hidden gap-1.5 text-sm lg:flex"
        aria-label="Filter resources"
      >
        {filters.map((filter) => {
          const isActive = filter.value === selectedFilter;
          return (
            <li key={filter.value}>
              <Link
                href={updateFilter(filter.value)}
                aria-label={`Filter by ${filter.label}`}
                scroll={false}
                prefetch={false}
                aria-current={isActive ? 'true' : undefined}
                className={`flex items-center justify-center gap-2 rounded-full border px-2.5 py-1.5 font-medium shadow-sm transition ${
                  isActive
                    ? 'border-blue-500 bg-blue-500 text-white hover:bg-blue-600 dark:border-sky-500 dark:bg-sky-500 dark:hover:bg-sky-600'
                    : 'border-slate-400 bg-white text-slate-700 hover:bg-slate-50 hover:text-slate-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700'
                }`}
              >
                {filter.icon && (
                  <filter.icon className="h-5 w-5" aria-hidden="true" />
                )}
                {filter.label}
              </Link>
            </li>
          );
        })}
      </ul>

      {/* MOBILE */}
      <div className="relative lg:hidden">
        <Menu as="div" className="inline-block text-left">
          <MenuButton
            className="inline-flex w-full justify-center rounded-md border border-slate-400 bg-white px-3 py-1.5 text-sm font-medium text-slate-700 shadow-sm transition hover:bg-slate-50 hover:text-slate-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700"
            aria-label="Select filter category"
          >
            Categories
            <ChevronDownIcon
              className="-mr-1 ml-2 h-5 w-5 text-violet-200 hover:text-violet-100"
              aria-hidden="true"
            />
          </MenuButton>
          <Transition
            as={Fragment}
            enter="transition ease-out duration-100"
            enterFrom="transform opacity-0 scale-95"
            enterTo="transform opacity-100 scale-100"
            leave="transition ease-in duration-75"
            leaveFrom="transform opacity-100 scale-100"
            leaveTo="transform opacity-0 scale-95"
          >
            <MenuItems
              as="ul"
              className="absolute right-0 z-[31] mt-2 flex w-56 origin-top-right flex-col gap-4 rounded-md bg-white p-4 shadow-lg ring-1 ring-black/5 focus:outline-none dark:bg-slate-800 dark:text-white"
              aria-label="Filter categories"
            >
              {filters.map((filter) => {
                const isActive = filter.value === selectedFilter;
                return (
                  <MenuItem as="li" className="text-lg" key={filter.value}>
                    <Link
                      className={`flex items-center gap-2 ${
                        isActive
                          ? 'font-semibold text-blue-600 dark:text-sky-400'
                          : ''
                      }`}
                      href={updateFilter(filter.value)}
                      prefetch={false}
                      scroll={false}
                      aria-label={`Filter by ${filter.label}`}
                      aria-current={isActive ? 'true' : undefined}
                    >
                      {filter.icon && (
                        <filter.icon className="h-5 w-5" aria-hidden="true" />
                      )}
                      {filter.label}
                    </Link>
                  </MenuItem>
                );
              })}
            </MenuItems>
          </Transition>
        </Menu>
      </div>
    </>
  );
}
